---
layout: single
property_name: pointer-events
---

<section id="pointer-events" class="property">
  <header class="property-header">
    <nav class="property-links">
      <a class="property-links-direct" href="{{site.url}}/property/pointer-events/" data-property-name="pointer-events" data-tooltip="Single page for this property">Permalink</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="pointer-events">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/pointer-events" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="#pointer-events"><span>#</span>pointer-events</a>
    </h2>
    <div class="property-description">
      <p>Defines if the element reacts to pointer events or not.</p>

    </div>

  </header>



    <style type="text/css">.pointer-events .block--container { cursor: default;position: relative; }.pointer-events .block--alpha { cursor: pointer;opacity: 0.7;padding: 0.4em 0.5em;position: absolute; }.pointer-events .block--alpha:hover { background: #310736;color: #fff;opacity: 1; }</style>


    <section class="example">
      <header class="example-header">
        <p class="example-name">
            <code class="example-default" data-tooltip="This is the property's default value">default</code>


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="pointer-events: auto;">pointer-events: auto;</code>
        </p>
        <div class="example-description">
          <p>The element <strong>reacts</strong> to pointer events, like <code>:hover</code> or <code>click</code>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div pointer-events " id="pointer-events-auto"><div class="block block--container"><p class="block block--alpha">Hover me</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div></div>
        </div>
      </aside>
          <style type="text/css">#pointer-events-auto{ pointer-events:auto;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="pointer-events: none;">pointer-events: none;</code>
        </p>
        <div class="example-description">
          <p>The element does <strong>not</strong> react to pointer events, like <code>:hover</code> or <code>click</code>. As a result, elements that are <em>behind</em> are accessible.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div pointer-events " id="pointer-events-none"><div class="block block--container"><p class="block block--alpha">Hover me</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div></div>
        </div>
      </aside>
          <style type="text/css">#pointer-events-none{ pointer-events:none;}</style>
        <style type="text/css">#pointer-events-none .block { pointer-events: none; }</style>
    </section>

</section>
